<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!-- <div class="one">hello</div>
    <div id="two">hello two</div>

    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul> -->

    <!-- <button>这是一个按钮</button> -->
    <!-- <button onclick="f">这是一个按钮</button> -->

    <!-- <div id="screen">hello world</div>
    <button id="button">这是获取内容按钮</button>
    <button id="button2">这是修改内容按钮</button> -->


    <!-- <div id="screen">0</div>
    <button id="plus">+1</button> -->

    <!-- <input id="screen" value="0">
    <button id="plus">+1</button> -->

<!--     <img src="scenery1.jpg">-->

    <!-- <input value="播放"> -->
<!-- 
    <input type="checkbox" id="all">全选<br>
    <input type="checkbox" class="food">火锅<br>
    <input type="checkbox" class="food">牛排<br>
    <input type="checkbox" class="food">日料<br> -->

    <!-- <div style="font-size: 20px;">这是一个文本</div> -->

<!--    <style>-->
    <!--    .light{-->
    <!--        background-color: whitesmoke;-->
    <!--        color: rgb(36, 36, 36);-->
    <!--    }-->
    <!--    .dark{-->
    <!--        background-color: rgb(94, 94, 94);-->
    <!--        color: whitesmoke;-->
    <!--    }-->
    <!--</style>-->

    <!--<div class="light" style="height:400px">这是一段话Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae animi odit asperiores. Placeat, cupiditate ullam repellat, adipisci ratione debitis doloremque suscipit dicta praesentium illo animi rerum mollitia. Officia, non voluptatum.</div>-->
    <!--<button>夜间模式</button>-->


    <!-- <div class="container"></div>
    <button>删除节点</button> -->

    <script>
        
        // 给容器创建标签
        // 1. 创建新节点
        // let newDiv = document.createElement('div');
        // newDiv.id = 'newDiv';
        // newDiv.className = 'one';
        // newDiv.innerHTML = 'hello';
        // console.log(newDiv);
        // // 2. 把节点挂在dom树上(appendChild)
        // let container = document.querySelector('.container');
        // container.appendChild(newDiv);

        // // 删除节点
        // let button = document.querySelector('button');
        // button.onclick = function(){
        //     container.removeChild(newDiv);
        // }


        // // 修改类名
        // let button = document.querySelector('button');
        // button.onclick = function(){
        //     let theme = document.querySelector('div');
        //     if(theme.className == 'light'){
        //         theme.className = 'dark';
        //         button.innerHTML = '白天模式';
        //     }else if(theme.className == 'dark'){
        //         theme.className = 'light';
        //         button.innerHTML = '夜间模式';
        //     }
        // }


        // 修改属性值
        // let div = document.querySelector('div');
        // div.onclick = function(){
        //     // 获取当前字体大小
        //     // 从头到尾转换,遇到非数字的字符就停止,所以能丢掉px
        //     let fontSize = parseInt(div.style.fontSize);
        //     // 在当前的基础上 加上 5px
        //     fontSize += 5;
        //     div.style.fontSize = fontSize + 'px';
        // }

        // let all = document.querySelector('#all');
        // let foods = document.querySelectorAll('.food');
        // // 给all注册点击事件
        // all.onclick = function(){
        //     for(let i = 0; i < foods.length; i++){
        //         foods[i].checked = all.checked;
        //     }
        // }

        // // 给每个food注册点击事件
        // for(let i = 0; i < foods.length; i++){
        //     foods[i].onclick = function(){
        //         all.checked = checkFood(foods);
        //     }
        // }
        // let checkFood = function(foods){
        //     for(let i = 0; i < foods.length; i++){
        //         if(!foods[i].checked){
        //             // 只要有一个未选中,就让all未选中
        //             return '';
        //         }
        //     }
        //     // 遍历一圈,发现所有的都被选中,
        //     return 'checked'
        // }


        // let input = document.querySelector('input');
        // input.onclick = function(){
        //     if(input.value == '播放'){
        //         input.value = '暂停';
        //     }else {
        //         input.value = '播放'
        //     }
        // }

        // let picture = document.querySelector('img');
        // console.log(picture.src);
        // picture.onclick = function() {
        //     if(picture.src.lastIndexOf('scenery1.jpg') >= 0) {
        //         picture.src = 'scenery2.jpg';
        //     }else if(picture.src.lastIndexOf('scenery2.jpg') >= 0) {
        //         picture.src = 'scenery1.jpg';
        //     }
        // }

        // let plus = document.querySelector('#plus');
        // plus.onclick = function(){
        //     let screen = document.querySelector('#screen');

        //     // div里的元素
        //     // let num = screen.innerHTML;
        //     // // console.log(typeof(num));// 得到的是String类型的数据
        //     // // 转成int型
        //     // num = parseInt(num);
        //     // num += 1;
        //     // // num++  直接使用
        //     // screen.innerHTML = num;

        //     // input里的元素
        //     let num = screen.value;
        //     // console.log(typeof(num));// 得到的是String类型的数据
        //     // 转成int型
        //     num = parseInt(num);
        //     num += 1;
        //     // num++  直接使用
        //     screen.value = num;
        // }

        // let button = document.querySelector('#button');
        // button.onclick = function(){
        //     let screen = document.querySelector('#screen');
        //     console.log(screen.innerHTML);
        // }

        // let button2 = document.querySelector('#button2');
        // button2.onclick = function(){
        //     let screen = document.querySelector('#screen');
        //     screen.innerHTML = '<h1>修改后的内容</h1>';
        // }

        // let button = document.querySelector('button');
        // button.onclick = function(){
        //     // 回调函数,在合适的时机被调用
        //     console.log("点击事件方法");
        // }

        // 写法二
        // let f = function(){
        //     console.log("点击事件方法");
        // }

        // // 参数就是一个css选择器
        // let obj = document.querySelector('.one');
        // console.log(obj);

        // let obj2 = document.querySelector('#two');
        // console.log(obj2);

        // // 选择器匹配到多个元素时,匹配的就是第一个
        // let obj3 = document.querySelector('ul li');
        // console.log(obj3);

        // // 如果想都选中,就用querySelectorAll
        // let obj4 = document.querySelectorAll('ul li');
        // console.log(obj4);



        // alert("hello");

        // function hello() {
        //     console.log("hello");
        // }
        // hello();
        // hello();
        // hello();



        // function hello() {
        //     console.log("hello");
        // }
        // let f = hello;// 赋值,得到的 f是 function类型的变量

        // let f = function hello() {
        //     console.log("hello");
        // }

        // let f = function() {// 定义了一个匿名函数,赋值给 f ,直接通过 f进行调用
        //     console.log("hello");
        // }
        //
        // f();


        // let num = 10
        // function hello2() {
        //     function hello() {
        //         console.log(num);
        //     }
        //     hello();
        // }
        // hello2();

        // let student = {
        //     name: "ak",
        //     age: 17,
        //     height: 175,
        //     sing: function () {
        //         console.log("唱");
        //     },
        //     jump: function () {
        //         console.log("跳");
        //     }
        // }
        // console.log(student.name);
        // console.log(student.age);
        // student.sing();

    </script>

</body>
</html>